<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../perEvaluationResult/importhead.jsp" %>
<%@ page import = "model.*"%>
<%@ page import="util.properties.UserLoginStatus"%>
<!DOCTYPE html>
<html>
	<head>
<%
	request.setCharacterEncoding("utf-8");
	String schoolid = request.getParameter("schoolid");
	//获得学校信息
	TSchool school = DAOFactory.getSchoolDAO().getTSchool(schoolid);
%>
		<meta charset="utf-8">
		<title>学校轶事类型人数分布统计结果</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<style>
			html,body{
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			.classMHTLayer-top{
				height: 10%;
				line-height:10%;
				margin: 5px;
				border: 1px solid #BED5F3;
			}
			.classMHTLayer-top ul li{
				list-style: none;
				float: left;
				margin-left: 15px;
				margin-top: 10px;
				border-radius: 3px;
			}
			.classMHTLayer-top ul li button{
				background-color: #F8F8F8;
				border: 1px solid #BED5F3 !important;
			}
			.classMHTLayer-con{
				height: 80%;
				margin: 5px;
			}
			.classMHTLayer-con .left .top,.right .top{
				position: relative;
				padding-left: 10px;
				color: #183152;
				font-weight: bold;
				height: 35px;
				line-height: 35px;
				background: #E5EFFE;
				overflow: hidden;
			}
			.classMHTLayer-con .left{
				height: 100%;
				width: 49%;
				float: left;
				border: 1px solid #BED5F3;
			}
			.classMHTLayer-con .right{
				height: 100%;
				width: 50%;
				float: right;
				border: 1px solid #BED5F3;
			}
		</style>
	</head>
	<body>
		<div class="classMHTLayer-con">
			<div class="left">
				<div class="top">
					<span><%=school.getSchoolName()%>轶事类型人数分布统计结果</span>
				</div>
				<table class="layui-hide" id="tabschoolanecdotestatis" lay-filter="tabschoolanecdotestatis"></table>
				<script type="text/html" id="barDemo">
					<a href="javascript:" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="analysis">查看</a>
				</script>
			</div>
			<div class="right">
				<div class="top" style="margin-bottom:6px">
					<a href="javascript:" class="layui-btn layui-btn-xs layui-btn-normal" id="btnhistogram">查看各项与学校占比</a>
					<a href="javascript:" class="layui-btn layui-btn-xs layui-btn-normal" id="btnpiechart">查看各项与轶事总人数占比</a>
				</div>				
				<div id="histogram" style="width: 550px;height:300px; backgroud:red"></div>
				<div id="piechart" style="width: 550px;height:300px; backgroud:red; display: none"></div>
			</div>
		</div>
		<div id="layerbing" style="display:none;padding:20px">
			<div id="echartspie" style="width: 450px;height:260px; backgroud:red"></div>
		</div>		
	</body>
	
	<script src="../js/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="../lib/echarts.common.min.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="../lib/jquery.cookie.js"></script>
    <script src="../lib/json2.js"></script>
	<script type="text/javascript">
	layui.use(['form','table'], function(){
		var form = layui.form, 
		table = layui.table, 
		$ = layui.jquery;		
		
		table.render({
			elem: '#tabschoolanecdotestatis',
			url: '../sysanecdotestatis/getanecdotestatis?schoolid=<%=schoolid%>',
			title: '学校轶事类型人数分布图表',
			skin: 'line',
			even: true,
			page: {
				layout: ['count'],
				groups: 5,
				limit:20,
				theme: '#1E9FFF'
			},
			cols: [
				[{
					type: 'numbers',
					title: '序号'
				}, {
					field: 'anecdotetypename',
					title: '轶事类型',
					align: "center"
				}, {
					field: 'anecdotenumber',
					title: '分之人数',
					align: "center"
				}, {
					field: 'stunumber',
					title: '总人数',
					align: "center"
				}, {
					field: 'perrate',
					title: '比例',
					align: "center"
				}, {
					title: '查看图表',
					toolbar: '#barDemo',
					align: "center"
				}]
			]
		});
		
		//柱状图（各项人数/学校总人数）
		$("#btnhistogram").click(function() {
			// 基于准备好的dom，初始化柱状图echarts实例
			$("#piechart").hide();
			$("#histogram").show();
			var myChartbar = echarts.init(document.getElementById('histogram'));		
			var optionbar;
			//通过异步请求填充柱状图数据
			$.ajax({
				url: '../sysanecdotestatis/getanecdotestatis?schoolid=<%=schoolid%>',  
		        type: 'post', 
		        dataType: 'json', 
		        success: function (data) {
		        	if(data.code == 0){
		        		var titledata = [];
		        		var valuesdata = [];
		        		for(var i = 0; i < data.count; i++){	        		
		        			titledata[i] = data.data[i].anecdotetypename + ":" + data.data[i].anecdotenumber + "人";
		        			valuesdata[i] = (data.data[i].rate * 100).toFixed(2);
		        		}	        	
		        		// 指定图表的配置项和数据
						optionbar = {
						    title: {
				                text: '轶事类型人数分布统计柱状图'
				            },
				            tooltip: {},
				            legend: {
				                data:['人数']
				            },
				            xAxis: {
				                data: titledata
				            },
				            yAxis: {
			                    type: 'value',
			                    name: '人数(人)',
			                    min: 0,
			                    max: 50,
			                    interval: 10,
			                    axisLabel: {
			                        formatter: '{value}%'
			                    },
			                    nameLocation:'center',
			                    nameGap:65
				            },
				            series: [{
				                name: '人数',
				                type: 'bar',
				                barWidth : 50,//柱图宽度
				                itemStyle: { 
				                	normal: {
				                		color: function(params) {
					                        var colorList = [
					                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
					                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
					                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
					                        ];
	                         				return colorList[params.dataIndex]
	                     				}, 
	                     				barBorderRadius:[5, 5, 0, 0],
	                     				label : {show: true ,position: 'top', formatter: '{b}\n{c}%'}}},
				                data: valuesdata
				            }]
						};
						myChartbar.setOption(optionbar);
		        	}
		        }
			}); 
		})
		
		//饼图（各项人数/总人数）
		$("#btnpiechart").click(function() {
			$("#histogram").hide();
			$("#piechart").show();
			//$("#piechart").hide();
			// 基于准备好的dom，初始化柱状图echarts实例
			var myChartpie = echarts.init(document.getElementById('piechart'));		
			var optiontpie;
			
			//通过异步请求填充柱状图数据
			$.ajax({
				url: '../sysanecdotestatis/getanecdotestatis?schoolid=<%=schoolid%>',  
		        type: 'post', 
		        dataType: 'json', 
		        success: function (data) {
		        	if(data.code == 0){
		        		var categories = [];
		        		var values = [];
		        		for(var i = 0; i < data.count; i++){
		        			var anecdotetypename = data.data[i].anecdotetypename;//打架名称
		        			var anecdotenumber = data.data[i].anecdotenumber;//打架人数
		        			var perrate = data.data[i].perrate;//打架的占比
		        			
		        			categories[i] = anecdotetypename + ':' + anecdotenumber + '(' + perrate + ')';
		        			values[i] = {'name' : anecdotetypename + ':' + anecdotenumber + '(' + perrate + ')', 'value' : anecdotenumber};
		        		}		        				        		
		        		
		        		optiontpie = {
						    title : {
						        text: '分布图',		       
						        x:'center'
						    },
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        orient: 'vertical',
						        x: 'right',
						        data: categories
						    },
						    series : [
						        {
						            name: '访问来源',
						            type: 'pie',
						            radius : '55%',
						            center: ['50%', '60%'],
						            data:values,
						            itemStyle: {
						            	normal: {
					                		color: function(params) {
						                        var colorList = [
						                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
						                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
						                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
						                        ];
		                         				return colorList[params.dataIndex]
		                     				}, 
		                     			},
						                emphasis: {
						                    shadowBlur: 10,
						                    shadowOffsetX: 0,
						                    shadowColor: 'rgba(0, 0, 0, 0.5)'
						                }
						            }
						        }
						    ],
						    animation:false
						};
			         	myChartpie.setOption(optiontpie);
		        	}
		        }
			}); 
		})
		
		// 基于准备好的dom，初始化柱状图echarts实例
		var myChartbar = echarts.init(document.getElementById('histogram'));		
		var optionbar;   
		//通过异步请求填充柱状图数据
		$.ajax({
			url: '../sysanecdotestatis/getanecdotestatis?schoolid=<%=schoolid%>',  
	        type: 'post', 
	        dataType: 'json', 
	        success: function (data) {
	        	if(data.code == 0){
	        		var titledata = [];
	        		var valuesdata = [];
	        		for(var i = 0; i < data.count; i++){	        		
	        			titledata[i] = data.data[i].anecdotetypename + ":" + data.data[i].anecdotenumber + "人";
	        			valuesdata[i] = (data.data[i].rate * 100).toFixed(2);
	        		}	        	
	        		// 指定图表的配置项和数据
					optionbar = {
					    title: {
			                text: '轶事类型人数分布统计柱状图'
			            },
			            tooltip: {},
			            legend: {
			                data:['人数']
			            },
			            xAxis: {
			                data: titledata
			            },
			            yAxis: {
		                    type: 'value',
		                    name: '人数(人)',
		                    min: 0,
		                    max: 50,
		                    interval: 10,
		                    axisLabel: {
		                        formatter: '{value}%'
		                    },
		                    nameLocation:'center',
		                    nameGap:65
			            },
			            series: [{
			                name: '人数',
			                type: 'bar',
			                barWidth : 50,//柱图宽度
			                itemStyle: { 
			                	normal: {
			                		color: function(params) {
				                        var colorList = [
				                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
				                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
				                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
				                        ];
                         				return colorList[params.dataIndex]
                     				}, 
                     				barBorderRadius:[5, 5, 0, 0],
                     				label : {show: true ,position: 'top', formatter: '{b}\n{c}%'}}},
			                data: valuesdata
			            }]
					};
					myChartbar.setOption(optionbar);
	        	}
	        }
		}); 
		
		table.on('tool(tabschoolanecdotestatis)', function(obj){
   			var schooldata = obj.data;
    		if(obj.event === 'analysis'){
    			var myChartpie = echarts.init(document.getElementById('echartspie'));	
				var optiontpie;
				
    			var anecdotetypename = schooldata.anecdotetypename;//打架名称
        		var anecdotenumber = schooldata.anecdotenumber;//打架人数
        		var perrate = schooldata.perrate;//打架的占比
        		
        		var disanecdotetypename = '正常';
        		var disanecdotenumber = schooldata.stunumber - schooldata.anecdotenumber;
        		var disperrate = ((1 - schooldata.rate) * 100).toFixed(2) + '%';
        		
        		var categories = [ anecdotetypename + ':' + anecdotenumber + '(' + perrate + ')', disanecdotetypename + ':' + disanecdotenumber + '(' + disperrate + ')' ];
        		var values = [ {'name' : anecdotetypename + ':' + anecdotenumber + '(' + perrate + ')', 'value' : anecdotenumber} , {'name' : disanecdotetypename + ':' + disanecdotenumber + '(' + disperrate + ')', 'value' : disanecdotenumber} ];
        		
        		optiontpie = {
				    title : {
				        text: schooldata.anecdotetypename,		       
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data: categories
				    },
				    series : [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:values,
				            itemStyle: {
				            	normal: {
			                		color: function(params) {
				                        var colorList = [
				                           '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
				                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
				                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
				                        ];
                         				return colorList[params.dataIndex]
                     				}, 
                     			},
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ],
				    animation:false
				};
	         	myChartpie.setOption(optiontpie);
	         	
	         	layer.open({
					type : 1,
					title : '饼图',
					area : [ '500px', '410px' ],
					shade : 0.4,
					content : $('#layerbing'),
					btn : ['返回' ],
					yes : function() {
						layer.closeAll();
					}
				});
    		}
    	});	
	});

	</script>
</html>
